<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #app {
      width: 800px;
      height: 600px;
      background: #000;
      margin: 0 auto;
		  position:relative;
    }
    #ball {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
    }
    #yellow {
      width: 150px;
      height: 20px;
      background: yellow;
      position: absolute;
      bottom: 40px;
      left: 0;
    }
    #blood{
      color:white;
      font-size:8px;
    }
	  #progress{
	    width:200px;
      height:15px;
      background-color:yellow;
      border-radius:5px;
      position:absolute;
      top:10px;
      right:20px;
	   }
	  #bd{
	    width:100%;
      height:100%;
      background-color:red;
      border-radius:5px;
      text-align:center;
      display: flex;
      align-items: center;
      justify-content: center;
	  }
  </style>
</head>
<body>
  <input id="startBtn" type="button" value="开始" onclick="startGame.apply(this)"/>
  <div id="app">
    <img src="./ball.jpg" id="ball">
    <div id="yellow"></div>
    <div id="progress">
      <div id="bd" ><span id="blood">100</span></div>
    </div>
  </div>
  <script>
    function getCss(ele,css){
	    return window.getComputedStyle(ele,null)[css];
	  }
    function do_downright (ball,old_top,old_left) {
      ball.style.top = old_top + 20 +'px'
      ball.style.left = old_left + 20 +'px'
    }
    function do_downleft (ball,old_top,old_left) {
      ball.style.top = old_top + 20 +'px'
      ball.style.left = old_left - 20 +'px'
    }
    function do_topright (ball,old_top,old_left) {
      ball.style.top = old_top - 20 +'px'
      ball.style.left = old_left + 20 +'px'
    }
    function do_topleft (ball,old_top,old_left) {
      ball.style.top = old_top - 20 +'px'
      ball.style.left = old_left - 20 +'px'
    }


    const ball = document.querySelector('#ball')
    const yellow = document.querySelector('#yellow')
    const startBtn = document.querySelector('#startBtn')
    const end_x = 720
    const end_y = 520
    var timer=null;
    const [downright,downleft,topleft,topright] = [1,2,3,4]
    // x--left y--top
    var direction = downright

    var fill_blood = 100
    var blood = document.querySelector('#blood')
    var bd = document.querySelector('#bd')
    function startGame() {
      if (startBtn.value === '原地复活！') {
        timer=window.setInterval(move,100);
        blood.innerHTML = 100
        fill_blood = 100
        bd.style.width = 200 + 'px'
      }
      if(timer==null){
        timer=window.setInterval(move,100);
        this.value="暂停";
      }else{
        window.clearInterval(timer);
        timer=null;
        this.value="开始";
      }
    }

    
    function move () {
      var old_top = parseInt(getCss(ball,'top'))
      var old_left = parseInt(getCss(ball,'left'))

      var yellow_top = parseInt(getCss(yellow,'top')) 
      var yellow_bottom = yellow_top + 20
      var yellow_left = parseInt(getCss(yellow,'left'))
      var yellow_right = yellow_left + 150

      var e_ball = document.querySelector('#ball')
      var ball_top = e_ball.offsetTop
      var ball_left = e_ball.offsetLeft
      var ball_right = ball_left + 80
      if (direction === downright) {
        // bottom: end_y - 60
        do_downright(e_ball,old_top,old_left)
        if (e_ball.offsetTop === end_y && e_ball.offsetLeft < end_x) {
          fill_blood -= 50
          blood.innerHTML = fill_blood
          bd.style.width=(fill_blood/100)*200+"px";
          direction = topright
          do_topright(e_ball,old_top,old_left)
          if (fill_blood <= 0) {
            alert('游戏结束了哦')
            window.clearInterval(timer)
            timer = null
            startBtn.value = '原地复活！'
          }
        }
        // 碰到底部反方向
        if (e_ball.offsetLeft === end_x) {
          direction = downleft
          do_downleft(e_ball,old_top,old_left)
        }
        // 碰到方块
        if ((yellow_bottom - ball_top  === 100) && (Math.max(ball_right,yellow_right) - Math.min(ball_left,yellow_left) < 230)) {
          direction = topright
          do_topright(e_ball,old_top,old_left)
        }
      }
      if (direction === topright) {
        do_topright(e_ball,old_top,old_left)
        if (e_ball.offsetTop < end_y && e_ball.offsetLeft === end_x) {
          direction = topleft
          do_topleft(e_ball,old_top,old_left)
        }
        if (e_ball.offsetTop === 0) {
          direction = downright
          do_downright(e_ball,old_top,old_left)
        } 
      }
      if (direction === topleft) {
        do_topleft(e_ball,old_top,old_left)
        if (e_ball.offsetTop === 0 && e_ball.offsetLeft < end_x) {
          direction = downleft
          do_downleft(e_ball,old_top,old_left)
        }
        if (e_ball.offsetLeft === 0) {
          direction = topright
          do_topright(e_ball,old_top,old_left)
        }
      }
      if (direction === downleft) {
        do_downleft(e_ball,old_top,old_left)
        if (e_ball.offsetTop < end_y && e_ball.offsetLeft === 0) {
          direction = downright
          do_downright(e_ball,old_top,old_left)
        }
        if (e_ball.offsetTop === end_y) {
          fill_blood -= 50
          blood.innerHTML = fill_blood
          bd.style.width=(fill_blood/100)*200+"px";
          direction = topright
          do_topright(e_ball,old_top,old_left)
          if (fill_blood <= 0) {
            alert('游戏结束了哦')
            window.clearInterval(timer)
            timer = null
            startBtn.value = '原地复活！'
          }
        }
        if ((yellow_bottom - e_ball.offsetTop  === 100) && (Math.max(ball_right,yellow_right) - Math.min(ball_left,yellow_left) < 230)) {
          direction = topleft
          do_topleft(e_ball,old_top,old_left)
        }
      }
    }

    document.onkeydown=move_yellow;
    function move_yellow(event){
	  //alert(event.keyCode);
	  var old=parseInt(getCss(yellow,"left"));
	  switch(event.keyCode){
	    case 37:
		   yellow.style.left=(old-20<0)?"0px":(old-20+"px");
		   break;
		case 39:
		   yellow.style.left=(old+20>650)?"650px":(old+20+"px");
		   break;
		default:break;
	  }
	}
  </script>
</body>
</html>
